<template>
  <div id="app" style="height: 90%;margin-left: 1%;margin-right: 1%;margin-top: 1%;">
    <div>
      <el-form size="small">
        <el-form-item>
          <el-input
            v-model="aplayer.source"
            placeholder="输入播放地址，点击播放"
            size="medium"
            clearable
            style="width: 60%"
            class="filter-item"
          />
          <el-button class="filter-item" size="medium" icon="el-icon-video-play" type="primary" @click="play">播放
          </el-button>
          <el-button class="filter-item" size="medium" icon="el-icon-refresh" type="success" @click="playRandomVideo">
            随机播放
          </el-button>
          <el-button
            :disabled="aplayer.source && aplayer.source.trim() === ''"
            class="filter-item"
            size="medium"
            icon="el-icon-download"
            type="danger"
            @click="downloadVideo"
          >下载
          </el-button>
          <el-button size="medium" type="warning" @click="openDownloadManager">下载中心<i
            class="el-icon-s-operation el-icon--right"
          /></el-button>
        </el-form-item>
      </el-form>
    </div>
    <VideoPlayer
      v-if="aplayer.isShow"
      ref="player"
      play-style="margin-right: 1%"
      :source="aplayer.source"
      :vid="aplayer.vid"
      :autoplay="aplayer.autoplay"
      :cover="aplayer.cover"
      :control-bar-visibility="aplayer.controlBarVisibility"
      :video-width="aplayer.videoWidth"
      :video-height="aplayer.videoHeight"
    />
    <div v-if="videoInfo && videoInfo.alt"><h3>{{ videoInfo.alt }}</h3></div>
    <div v-if="videoInfo && videoInfo.tag">
      <el-tag
        v-for="(tag, index) in videoInfo.tag.split(',')"
        :key="index"
        :type="randomColor(index)"
        class="mx-1"
        style="margin-right: 4px"
        effect="plain"
      >{{ tag }}
      </el-tag>
    </div>
    <div style="margin-bottom: 3%">
      <Recommend ref="recommendRef" :param="param" @jumpToPlay="convert" />
    </div>
    <Form v-if="downloadForm.dialogVisible" ref="downloadFormRef" @addDownloadData="addDownloadData" />
    <VideoDownloader ref="videoDownloaderRef" /></div>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer/index.vue'
import Recommend from '@/components/Recommend/index.vue'
import Form from './form.vue'
import VideoDownloader from '@/components/VideoDownloader/index.vue'
import { randomColor, getRandomIndex, getRandomVideoUrl } from '@/utils/spiderUtil'

export default {
  name: 'Player',
  dicts: ['server_url'],
  components: { VideoPlayer, Recommend, Form, VideoDownloader },
  data() {
    return {
      downloadForm: {
        dialogVisible: false,
        url: '',
        fileName: ''
      },
      param: {},
      randomColor: randomColor,
      videoInfo: {},
      isConvert: false,
      aplayer: {
        isShow: false,
        source: '',
        vid: Math.random().toString(36).substr(2),
        cover: '',
        autoplay: false,
        id: 'player-con',
        width: '100%',
        height: '500px',
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        language: 'zh-cn',
        controlBarVisibility: 'hover',
        useH5Prism: true,
        videoWidth: '100%',
        videoHeight: '100%'
      },
      player: null
    }
  },
  created() {
    const params = this.$route.params
    this.initPlay(params)
  },
  methods: {
    getRandomVideoUrl, getRandomIndex,
    getRandomIndexByList(tag) {
      if (tag) {
        const tagList = tag.split(',')
        return this.getRandomIndex(tagList)
      }
      return ''
    },
    downloadVideo() {
      this.downloadForm.dialogVisible = true
      this.downloadForm.url = this.aplayer.source
      this.downloadForm.fileName = this.videoInfo.alt
      this.$nextTick(() => {
        this.$refs.downloadFormRef.initData(this.downloadForm)
      })
    },
    initPlay(params) {
      this.videoInfo = params
      this.videoInfo.show = false
      this.param = {
        tag: this.getRandomIndexByList(this.videoInfo.tag)
      }
      if (params && params.playLink) {
        this.aplayer.source = params.playLink
        this.aplayer.cover = params.img
        this.aplayer.id = params.videoId
        this.aplayer.isShow = true
      }
      this.videoInfo.show = true
    },
    openDownloadManager() {
      this.$refs.videoDownloaderRef.visible = true
    },
    playRandomVideo() {
      this.aplayer.source = this.getRandomVideoUrl(Math.round(Math.random() * 20))
      this.play()
    },
    play() {
      if (this.aplayer.source) {
        this.aplayer.isShow = true
        this.aplayer.img = ''
        this.aplayer.id = crypto.randomUUID()
        this.reloadPlayer()
      }
    },
    convert(params) {
      this.initPlay(params)
      this.reloadPlayer()
      this.$refs.recommendRef.refresh()
    },
    reloadPlayer() {
      const player = this.$refs.player
      player && player.reloadPlayer()
    },
    addDownloadData(data) {
      this.$refs.videoDownloaderRef.addDownloadData(Object.assign({}, data))
    }
  }
}
</script>

<style>
.player {
  z-index: 999;
  position: fixed;
  top: 0;
}
</style>
